<!-- <!DOCTYPE html> -->
<html>
    <head>
        <title>Point Cloud Viewer</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.170.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/",
                "lil": "https://unpkg.com/lil-gui@0.19.2/dist/lil-gui.esm.min.js"
            }
        }
        </script>

        <style type="text/css">
            #info {
                color: #7ad7ff;
                font-family: 'Open Sans', sans-serif;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0.3rem;
                background-color: #404040;
                z-index: 1;
            }
            @media (max-width: 600px) {
                #info,
                .dg {
                    display: none;
                }
            }
        </style>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv">
            <div id="info"></div>
        </div>

        <script type="module">

            import lil from 'lil';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';
            import * as debug from 'debug';
            import * as itowns_widgets from 'itowns_widgets';

            var potreeLayer;
            var oldPostUpdate;
            var viewerDiv;
            var debugGui;
            var view;
            var controls;

            // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
            itowns.CRS.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

            viewerDiv = document.getElementById('viewerDiv');
            viewerDiv.style.display = 'block';

            debugGui = new lil();

            const crs = 'EPSG:4326';
            view = new itowns.View(crs, viewerDiv);
            setupLoadingScreen(viewerDiv, view);
            view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);

            // Configure Point Cloud layer
            const source = new itowns.Potree2Source({
                file: 'metadata.json',
                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/potree2.0/lion',
                crs,
            });

            potreeLayer = new itowns.Potree2Layer('Lion', {
                source,
            });

            // point selection on double-click
            function dblClickHandler(event) {
                var pick = view.pickObjectsAt(event, 5, potreeLayer);

                for (const p of pick) {
                    console.info('Selected point #' + p.index + ' in position (' +
                        p.object.position.x + ', ' +
                        p.object.position.y + ', ' +
                        p.object.position.z +
                        ') in Points ' + p.object.layer.id);
                }
            }
            view.domElement.addEventListener('dblclick', dblClickHandler);

            function placeCamera(position, lookAt) {
                view.camera.camera3D.position.copy(position);
                view.camera.camera3D.lookAt(lookAt);
                // create controls
                controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
                debugGui.add(controls.options, 'moveSpeed', 1, 100).name('Movement speed');

                view.notifyChange(view.camera.camera3D);
            }

            // add potreeLayer to scene
            function onLayerReady() {
                var position;
                var lookAt = new THREE.Vector3();
                var size = new THREE.Vector3();

                potreeLayer.root.voxelOBB.box3D.getSize(size);
                potreeLayer.root.voxelOBB.box3D.getCenter(lookAt);
                lookAt.z = potreeLayer.root.voxelOBB.box3D.min.z;

                debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);

                view.camera.camera3D.far = 2.0 * size.length();

                var corner = new THREE.Vector3(...potreeLayer.source.metadata.boundingBox.min);
                var position = corner.clone().add(
                    size.multiply({ x: 0, y: 0, z: (size.x / size.z) })
                );

                placeCamera(position, lookAt);
                controls.moveSpeed = size.length() / 3;

                // update stats window
                var info = document.getElementById('info');
                view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
                    info.textContent = potreeLayer.displayedCount.toLocaleString() + ' points';
                });
            }
            window.view = view;
            view.addLayer(potreeLayer).then(onLayerReady);
            window.view = view;
            window.itowns = itowns;
            window.THREE = THREE;

        </script>
    </body>
</html>

